<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 400px;
            background-color: aqua;
            display: flex;
            flex-direction: row;
            /* flex-direction: row-reverse; 反方向*/
            justify-content: center;
            /* justify-content: flex-end;右对齐 */
            /* justify-content: space-between;两端对齐 */
            /* justify-content: space-around;间隔相等 */
            /* align-items: flex-end;交叉轴终点对齐 */
            align-items: center;
            /* align-items: center;交叉轴居中 */
            align-content: center;
            /* align-items: stretch; 如未设置高度或auto将占满整个容器高度*/
            /* align-items: baseline;文字第一行文字的基线对齐 */
            /* flex-wrap: nowrap;默认不换行 */
            /* flex-wrap: wrap;换行第一行在上方 */
            flex-wrap: wrap;
            /* flex-wrap: wrap-reverse;换行第一行在下方 */
            /* flex-flow是flex-direction和flex-wrap的简写 默认值为row wrap */
            /* flex-flow: row wrap ;
            /* align-content: flex-start;起点对齐 */
            /* align-content: flex-end;终点对齐 */
            /* align-content: space-between; 两端对齐 */
            /* align-content:space-around; 间隔相等 */
            flex-grow: 1;
            /* flex-grow 当容器有多余空间时，其子项（flex items）如何分配这些额外的空间。 */
             /* flex-shrink 当 flex 容器空间不足时，其子项（flex items）如何缩小以适应容器的大小。 */
             flex-shrink: 1;
            /* flex-basis: auto; 的意思是 flex 子项的初始大小将根据其内容自动计算。这通常意味着子项的大小将基于其内容（例如文本或内部元素的尺寸）来决定  定义了 flex 子项在主轴（默认为水平方向）上的初始大小*/
            /* flex-basis的优先级大于width */
            flex-basis: auto;
           /* flex: 1 1 auto;或flex:auto; 就是flex-grow flex-shrink flex-basis的简写*/
           /* flex的默认值是flex:0 1 auto */
        }
        .item1{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;
        }
        .item2{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;
            align-self: flex-start;
            /* align-self: flex-start;在交叉轴起点 align-self用在项目 align-content用在容器 */

        }
        .item3{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;

        }
        .item4{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;

        }
        .item5{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;

        }
        .item6{
            width: 150px;
            height: 150px;
            background-color: bisque;
            /* margin-left: 10px; */
            border: 1px solid blue;
            /* order: 0;数值越小，排列越靠前，默认值为0 */
            order: -1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>

    </div>
</body>
</html>